<template>
  <div class="container">
    <div class="login-panel clearfix">
      <div class="login-left"></div>
      <div class="login-right">
        <div class="login-title clearfix">
          <div class="logo"></div>
          <div class="text">系统登录</div>
        </div>
        <a-form ref="formRef" class="login-form" :model="formData" :rules="formRules" :wrapper-col="{ span: 24 }">
          <a-form-item name="username">
            <a-input v-model:value="formData.username" placeholder="用户名">
              <template #prefix>
                <UserOutlined />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="password">
            <a-input-password v-model:value="formData.password" placeholder="密码">
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item name="captcha">
            <a-input v-model:value="formData.captcha" placeholder="验证码" style="width: 70%">
              <template #prefix>
                <SafetyOutlined />
              </template>
            </a-input>
            <img :src="captchaUrl" class="captchaImage" title="点击更换验证码" @click="onRefreshCaptcha" />
          </a-form-item>
          <a-form-item>
            <a-button :loading="loading" block type="primary" @click="handleSubmit">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="footer">
      &copy; Copyright 2022
      <a :href="appLink" target="_blank">{{ appName }}</a> . All rights reserved.
    </div>
  </div>
</template>

<script name="login" lang="ts" setup>
const loading = ref<boolean>(false);
const appName = import.meta.env.VITE_APP_NAME;
const appLink = import.meta.env.VITE_APP_LINK;

const router = useRouter();
const userStore = useUserStore();

const formRef = ref();
const formData = reactive({
  username: "admin",
  password: "123456",
  random: "",
  captcha: ""
});
const formRules = {
  username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
  password: [
    { required: true, trigger: "blur", message: "请输入密码" },
    { min: 5, trigger: "blur", message: "密码长度最少为5位" }
  ],
  captcha: [
    { required: true, trigger: "blur", message: "请输入验证码" },
    { min: 4, max: 4, trigger: "blur", message: "验证码长度为4位" }
  ]
};

const captchaUrl = ref<string>("");
const onRefreshCaptcha = () => {
  formData.captcha = "";
  formData.random = new Date().getTime().toString();
  captchaUrl.value = `${import.meta.env.VITE_API_URL}/common/captcha?random=${formData.random}`;
};

const handleSubmit = e => {
  e.preventDefault();
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      userStore
        .login(formData)
        .then(() => {
          antdMessage.success("登录成功!");
          router.push({ path: "/home" });
        })
        .catch(() => {
          onRefreshCaptcha();
        })
        .finally(() => {
          loading.value = false;
        });
    })
    .catch(error => {
      //console.log(error);
    });
};

onMounted(() => {
  onRefreshCaptcha();
});
</script>
<style lang="less" scoped>
.container {
  background-image: url("@/assets/images/login/login-bg.png");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-panel {
    background-color: #ffffff;
    border-radius: 10px;
    -moz-box-shadow: @shadow;
    -webkit-box-shadow: @shadow;
    box-shadow: @shadow;

    .login-left {
      width: 441px;
      height: 400px;
      float: left;
      background-image: url("@/assets/images/login/login-left.png");
      position: relative;

      @media (max-width: 992px) {
        display: none;
      }
    }

    .login-right {
      float: left;
      width: 400px;
      height: 400px;
      padding: 20px 40px;

      .login-title {
        margin-top: 30px;

        .logo {
          background-image: url("@/assets/images/logo-blue.png");
          background-size: 100%;
          width: 32px;
          height: 32px;
          float: left;
        }
        .text {
          float: left;
          margin-left: 10px;
          font-size: 20px;
          color: @theme-color;
        }
      }

      .login-form {
        margin-top: 30px;

        .captchaImage {
          margin-left: 5px;
          margin-top: -3px;
          height: 28px;
          width: 70px;

          &:hover {
            cursor: pointer;
          }
        }

        .anticon {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 35px;
    color: @theme-color;
    a {
      color: @theme-color;
    }
  }
}
</style>
